<template>
	<!-- 页面全局配置 -->
	<view class="pageconfig">
		<!--vuetop-->
		<view class="flex1   response  flex flex-wrap justify-start  " style="align-items: center;">
			<view class="flex2  flex-sub   flex flex-wrap justify-start  " style="flex-direction: column;">
				<text class="text3 text-bold "> 活动列表</text>
			</view>
		</view>
		<view class="flex4   response  flex flex-wrap justify-center  " v-for="(item,index) in activity_list ">
			<view class="flex5   response  flex flex-wrap justify-between  "
				style="flex-direction: row;align-items: center;">
				<image v-if="item&&item.cover&&item.cover.url" class="picture6 radius  radius"
					style="width:322rpx;height:228rpx;min-height:unset;" :src="item.cover.url"></image>
				<view class="flex7  flex-sub   flex flex-wrap justify-start  "
					style="flex-direction: column;align-content: space-between;">
					<text class="text8 response "> {{item.title}}</text>
					<text class="text8 response "> 活动地点:{{item.position||"未设置"}}</text>
					<text class="text8 response ">
						活动时间:\n{{timestampToDateString(item.start_date)}}到{{timestampToDateString(item.end_date)}}</text>
					<view class="flex9   response  flex flex-wrap justify-between  " style="align-items: center;">
						<text class="text-gray "> </text>
						<view class="flex11    flex flex-wrap justify-start  " style="align-items: center;">
							<text @click="baoming(item)" class="text12 round bg-yellow "> {{item.btn_text}}</text>
							<text @click="to_activity_info(item)" class="text12 round bg-yellow "> 活动详情</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	const db = uniCloud.database()
	let abu_activity_db = db.collection('abu-activity-info');
	let abu_activity_sign_db = db.collection('abu-activity-signup');
	export default {
		data() {
			return {
				activity_list: [],
				user_info: {}
			};
		},
		async onLoad() {
			uni.showLoading({
				title: '加载中',
				mask: false
			});
			this.user_info = await uniCloud.getCurrentUserInfo()
			await this.load_data();
			uni.hideLoading()
		},
		methods: {
			isInDateRange(range) {
				const timestamp = Date.now(); // 获取当前时间戳（毫秒）
				return timestamp >= range.start_date && timestamp <= range.end_date;
			},

			async check_baoming(item) {
				const res_data = await abu_activity_sign_db.where({
					user_id: this.user_info.uid,
					activity_id: item._id
				}).get();
				// console.log(res_data.result.data.length);
				return res_data.result.data.length
				// return 0
			},
			async load_data() {
				try {
					const res = await abu_activity_db.get();
					// 使用 Promise.all 来等待所有异步操作完成
					this.activity_list = await Promise.all(res.result.data.map(async (item) => {
						// 对每个项目进行处理
						const btn_text = await this.getButtonText(item);
						return {
							...item,
							btn_text: btn_text
						};
					}));
				} catch (error) {
					console.error("Error loading data:", error);
				}
			},
			async getButtonText(item) {
				let btn_text = '';
				switch (item.status) {
					case 0:
						btn_text = "无法报名";
						break;
					case 1:
						// console.log(await this.check_baoming(item));
						const hasSignedUp = await this.check_baoming(item) > 0;
						const isInValidDate = await this.isInDateRange(item);
						if (isInValidDate) {
							console.log(hasSignedUp);
							btn_text = hasSignedUp ? "已报名" : "报名";
						} else {
							btn_text = "无法报名";
						}
						break;
					case 2:
						btn_text = "无法报名";
						break;
					default:
						btn_text = "未知状态";
				}
				return btn_text;
			},
			to_activity_info(item) {
				uni.navigateTo({
					url: "./activity_info?id=" + item._id
				})
			},
			async baoming(item) {
				uni.showLoading({
					title: '加载中',
					mask: false
				});
				const currentTime = new Date().getTime(); // 获取当前时间戳

				if (!(currentTime >= item.start_date && currentTime <= item.end_date) || item.status !== 1) {
					uni.showToast({
						title: '无法报名',
						icon: 'none'
					});
					return;
				}

				try {
					const queryRes = await abu_activity_sign_db.where({
						user_id: this.user_info.uid,
						activity_id: item._id
					}).get();

					if (queryRes.result.data.length > 0) {
						uni.showToast({
							title: '您已经报名过了',
							icon: 'none'
						});
						uni.hideLoading()
					} else {
						await abu_activity_sign_db.add({
							user_id: this.user_info.uid,
							activity_id: item._id
						});
						uni.showToast({
							title: '报名成功',
							icon: 'success'
						});
						uni.hideLoading()
						uni.redirectTo({
							url: './activity',
							success: () => {},
							fail: () => {},
							complete: () => {}
						});
					}
				} catch (err) {
					uni.hideLoading()
					console.error('报名操作失败', err);
					uni.showToast({
						title: '操作失败，请重试',
						icon: 'none'
					});
				}
			},
			timestampToDateString(timestamp) {
				var date = new Date(timestamp);
				// 使用 Date 对象的方法获取年、月、日等信息
				var year = date.getFullYear();
				var month = date.getMonth() + 1; // 月份是从 0 开始的，所以需要加 1
				var day = date.getDate();
				// 将其格式化为想要的字符串格式
				var dateString = year + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day;
				return dateString;
			}
		}
	}
</script>

<style lang="less">
	.pageconfig {
		width: 100%;
		overflow: hidden;
		overflow-y: scroll;
		height: 100vh;
	}



	/**pagedomcss**/


	.flex1 {
		width: 100%;
		background-color: #ffffff;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex2 {
		width: 69%;
		flex: 1;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text3 {
		font-size: 36rpx;
	}

	.flex4 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex5 {
		width: 100%;
		background-color: #ffffff;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.picture6 {
		width: 100%;
		height: 228rpx;
	}

	.flex7 {
		width: 39%;
		flex: 1;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text8 {
		width: 100%;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
	}

	.flex9 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex11 {
		position: relative;
	}

	.text12 {
		color: #515a6e;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.flex13 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text14 {
		font-weight: 100;
	}

	.flex15 {
		width: 100%;
		background-color: #ffffff;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.picture16 {
		width: 100%;
		height: 228rpx;
	}

	.flex17 {
		width: 39%;
		flex: 1;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text18 {
		width: 100%;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
	}

	.flex19 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex21 {
		position: relative;
	}

	.text22 {
		color: #515a6e;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.flex23 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text24 {
		font-weight: 100;
	}

	.flex25 {
		width: 100%;
		background-color: #ffffff;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.picture26 {
		width: 100%;
		height: 228rpx;
	}

	.flex27 {
		width: 39%;
		flex: 1;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text28 {
		width: 100%;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
	}

	.flex29 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex31 {
		position: relative;
	}

	.text32 {
		color: #515a6e;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.flex33 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text34 {
		font-weight: 100;
	}
</style>